import {Swiper, SwiperItem, Image, View } from '@tarojs/components'
import { useState } from 'react'
import { PureStandardProps } from '../consts'

import "./banner.scss"


interface BannerProps extends PureStandardProps {
    items?: string[],
    autoplay?: boolean
    onClick?: (index: number) => void
}

const Banner = (props: BannerProps) => {
    
    let [current, setCurrent] = useState(0)

    const onChange = (event) => {
        setCurrent(event.detail.current)
    }

    const onClick = () => {
        if (props.onClick) {
            props.onClick(current)
        }
    }

    let items = props.items ?? []
    // - 创建自定义指示器
    let dotItemEls = new Array()
    for (let index = 0; index < items.length; index++) {
        if (index == current) {
            dotItemEls.push(<View className="banner-dot-item banner-dot-item-active"></View>)
        } else {
            dotItemEls.push(<View className="banner-dot-item"></View>)
        }
    }
    

    // - 创建Item
    let itemEls = items.map((value) => {
        return (
            <SwiperItem>
                <Image mode="aspectFill" src={value}/>
            </SwiperItem>
        )
    })
    

    return (
        <View {...props} onClick={ onClick } className={[props.className, "banner"].join(" ")}>
            <Swiper circular indicatorActiveColor="white" onChange={ onChange } autoplay={ props.autoplay }>
                { itemEls }
            </Swiper>
            <View className="banner-dot" style={{ visibility: itemEls.length > 1 ? "visible" : "hidden"}}>
                { dotItemEls }
            </View>
        </View>
    )
}

export default Banner